﻿@model CTMOES.Models.QueModel 
@using CTMOES
<link href="@Url.Content("~/CSS/Style.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/CSS/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript" ></script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript" ></script>
<script src="@Url.Content("~/Scripts/jquery.ui.button.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.mouse.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.draggable.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.position.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.resizable.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.dialog.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.effects.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.bgiframe-2.1.2.js")" type="text/javascript"></script>
<script>
    $(function () {

        $("#dialog:ui-dialog").dialog("destroy");

        var description = $("#description"),
			correct = $("#correct"),
			allFields = $([]).add(description).add(correct),
			tips = $(".validateTips");

        function updateTips(t) {
            tips
				.text(t)
				.addClass("ui-state-highlight");
            setTimeout(function () {
                tips.removeClass("ui-state-highlight", 1500);
            }, 500);
        }

        function checkLength(o, n, min, max) {
            if (o.val().length > max || o.val().length < min) {
                o.addClass("ui-state-error");
                updateTips("Length of " + n + " must be between " +
					min + " and " + max + ".");
                return false;
            } else {
                return true;
            }
        }

        function checkRegexp(o, regexp, n) {
            if (!(regexp.test(o.val()))) {
                o.addClass("ui-state-error");
                updateTips(n);
                return false;
            } else {
                return true;
            }
        }

        $("#dialog-form").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "创建选项": function () {
                    var bValid = true;
                    allFields.removeClass("ui-state-error");

                    bValid = bValid && checkLength(description, "description", 3, 16);
                    bValid = bValid && checkLength(correct, "correct", 6, 80);

                    bValid = bValid && checkRegexp(description, /^[a-z]([0-9a-z_])+$/i, "XXXX");
                    bValid = bValid && checkRegexp(correct, /^[a-z]([0-9a-z_])+$/i, "xxxx");
                    if (bValid) {
                        $("#users tbody").append("<tr>" +
							"<td>" + description.val() + "</td>" +
							"<td>" + correct.val() + "</td>" +
						"</tr>");
                        $(this).dialog("close");
                    }
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
            }
        });

        $("#create-user")
			.button()
			.click(function () {
			    $("#dialog-form").dialog("open");
			});
    });
</script>
<a>创建</a>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Choice</legend>
        <div class="editor-label">
            Content:
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProContent)
            @Html.ValidationMessageFor(model => model.ProContent)
        </div>
        <div class="editor-label">
            Subject:
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.SubjectID, new SelectList(ViewData["Subject"] as List<Subject>, "ID", "Name"))
        </div>
        <div class="editor-label">
            Options:
        </div>
        <div>
            <div id="dialog-form" title="创建新选项">
                <p class="validateTips">
                    All form fields are required.</p>
                <form>
                <fieldset>
                    Description<input type="text" name="description" id="description" class="text ui-widget-content ui-corner-all" />
                    <label for="email">
                        Correct</label>
                    <input type="text" name="correct" id="correct" value="" class="text ui-widget-content ui-corner-all" />
                </fieldset>
                </form>
            </div>
            <div id="users-contain" class="ui-widget">
                <h1>
                    Existing Users:</h1>
                <table id="users" class="ui-widget ui-widget-content">
                    <thead>
                        <tr class="ui-widget-header ">
                            <th>
                                Description
                            </th>
                            <th>
                                Correct
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                John Doe
                            </td>
                            <td>
                                true
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button id="create-user">
                创建选项</button>
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Choice")
</div>
